<style scoped>
.quote{
    padding-top: 20px;
    position: relative;
    padding-bottom: 50px;
}
.quote-box{
    background-color: #f8f8f8;
    width: 86%;
    margin: 0 auto;
    padding: 15px;
    margin-bottom: 15px;
}
.col-item{
    margin-bottom: 15px;
}
.input-text{
    height: 36px;
    line-height: 36px;
}
.quote-box h3{
    font-weight: normal;
    font-size:14px;
    text-align: center;
}
.quote-info{
    width: 86%;
    margin: 0 auto;
    padding: 15px;
}
.quote-info-title{
    padding-left: 15px;
    position: relative;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}
.quote-info-title::before{
    position: absolute;
    content:'';
    width: 4px;
    height:50%;
    border: 2px solid #d9534f;
    background-color: #d9534f;
    left: 0;
    top: 25%;
}
.quote-info-title-check{
    margin-left: 15px;
}
.quote-info-check{
    margin-bottom: 15px;
}
.quote-footer{
    position: fixed;
    background-color: #f8f8f8;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
}
</style>
<style>

</style>

<template>
    <div class="quote">        
        <div class="quote-box">
            <Row>
                <Col span="12" class="col-item">
                    车牌号码：{{userinfo.LicenseNo}}
                </Col>
                <Col span="12" class="col-item">
                    注册日期：{{userinfo.RegisterDate}}
                </Col>
                <Col span="12" class="col-item">
                    发动机号：{{userinfo.EngineNo}}
                </Col>
                <Col span="12" class="col-item">
                    车架号：{{userinfo.CarVin}}
                </Col>
                <Col span="2" class="col-item input-text">
                    品牌型号：
                </Col>
                <Col span="4" class="col-item">
                    <Input v-model="userinfo.ModleName"  size="large" placeholder=""></Input>
                </Col>
                <Col span="8" offset="1" class="col-item">
                    <Input  size="large" placeholder="" disabled ></Input>
                </Col>
                <Col span="8" offset="1" class="col-item">
                    <Button type="error" size="large">车型查询</Button>
                </Col>
                <Col span="2" class="col-item input-text">
                    过户车：
                </Col>
                <Col span="2" class="col-item input-text">
                    <Select style="width:200px">
                        <Option value="1">是</Option>
                        <Option value="0">否</Option>                       
                    </Select>
                </Col>
            </Row>
        </div>
        <div class="quote-box">
            <Row>
                <Col span="24" class="col-item input-text">
                    
                    <!-- <span v-for="(item,index) in ComList" :key="item" class="quote">
                        {{company[item].name}}
                    </span> -->
                    <Form  :label-width="120">
                        <FormItem label="选择报价公司：">
                            <CheckboxGroup v-model="QuoteGrouparry">
                                <Checkbox  v-for="(item,index) in ComList" :key="item" :label="item">                          
                                    <span>{{company[item].name}}</span>
                                </Checkbox>
                            </CheckboxGroup>
                        </FormItem>
                    </Form>
                </Col>
                <Col span="24" class="col-item input-text">
                    <Form  :label-width="120">
                        <FormItem label="意向核保公司：">
                            <CheckboxGroup v-model="SubmitGrouparry">
                                <Checkbox  v-for="(item,index) in ComList" :key="item" :label="item">                          
                                    <span>{{company[item].name}}</span>
                                </Checkbox>
                            </CheckboxGroup>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
        </div>
        <div class="quote-box">
            <Row>
                <Col span="3" class="col-item input-text">
                    交强险/车船税起保时间：
                </Col>
                <Col span="19" class="col-item input-text">
                    <DatePicker type="datetime" :value="userinfo.NextForceStartDate" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" style="width: 200px"></DatePicker>
                </Col>
                <Col span="2" class="col-item input-text">
                    <Select v-model="userinfo.jiaoqiang">
                        <Option v-for="item in Holderornot" :key="item.value" :value="item.value">{{item.label}}</Option>                     
                    </Select>
                </Col>
                <Col span="3" class="col-item input-text">
                    商业险起保时间：
                </Col>
                <Col span="19" class="col-item input-text">
                    <DatePicker type="datetime" :value="userinfo.NextBusinessStartDate" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" style="width: 200px"></DatePicker>
                </Col>
                <Col span="2" class="col-item input-text">
                    <Select v-model="userinfo.shangye">
                        <Option v-for="item in Holderornot" :key="item.value" :value="item.value">{{item.label}}</Option>                      
                    </Select>
                </Col>
            </Row>
        </div>  
        <div class="quote-box">
            <h3>关系人信息</h3>
        </div>
        <div class="quote-info">
            <div class="quote-info-title">
                车主信息
            </div>
            <Row>
                <Col span="2" class="col-item input-text">
                    车主姓名：
                </Col>
                <Col span="4" class="col-item">
                    <Input v-model="userinfo.LicenseOwner"  size="large" placeholder=""></Input>
                </Col>
                <Col span="2" offset="1" class="col-item input-text">
                    证件类型：
                </Col>
                <Col span="4" class="col-item">
                    <Select v-model="userinfo.IdType">
                        <Option v-for="item in cardtype" :key="item.value" :value="item.value">{{item.label}}</Option>                      
                    </Select>
                </Col>
                <Col span="2" offset="1" class="col-item input-text">
                    证件号码：
                </Col>
                <Col span="4" class="col-item">
                    <Input v-model="userinfo.CredentislasNum"  size="large" placeholder=""></Input>
                </Col>
            </Row>
            <div class="quote-info-title">
                被保人信息
            </div>
            <Row>
                <Col span="2" class="col-item input-text">
                    被保人姓名：
                </Col>
                <Col span="4" class="col-item">
                    <Input v-model="userinfo.InsuredName"  size="large" placeholder=""></Input>
                </Col>
                <Col span="2" offset="1" class="col-item input-text">
                    证件类型：
                </Col>
                <Col span="4" class="col-item">
                    <Select v-model="userinfo.InsuredIdType">
                        <Option v-for="item in cardtype" :key="item.value" :value="item.value">{{item.label}}</Option>                     
                    </Select>
                </Col>
                <Col span="2" offset="1" class="col-item input-text">
                    证件号码：
                </Col>
                <Col span="4" class="col-item">
                    <Input v-model="userinfo.InsuredIdCard" size="large" placeholder=""></Input>
                </Col>
            </Row> 
            <Row>       
                <Col span="2" class="col-item input-text">
                    被保人手机号：
                </Col>
                <Col span="4" class="col-item">
                    <Input v-model="userinfo.InsuredMobile"  size="large" placeholder=""></Input>
                </Col>
                <Col span="2" offset="1" class="col-item input-text">
                    被保人邮箱：
                </Col>
                <Col span="4" class="col-item">
                    <Input v-model="userinfo.email" size="large" placeholder=""></Input>
                </Col>
            </Row>
            <div class="quote-info-title">
                投保人信息
                <Checkbox class="quote-info-title-check">投保人与被保人一致</Checkbox>
            </div>
            <Row>
                <Col span="2" class="col-item input-text">
                    投保人姓名：
                </Col>
                <Col span="4" class="col-item">
                    <Input v-model="userinfo.PostedName"  size="large" placeholder=""></Input>
                </Col>
                <Col span="2" offset="1" class="col-item input-text">
                    证件类型：
                </Col>
                <Col span="4" class="col-item">
                    <Select v-model="userinfo.HolderIdType">
                       <Option v-for="item in cardtype" :key="item.value" :value="item.value">{{item.label}}</Option>                                            
                    </Select>
                </Col>
                <Col span="2" offset="1" class="col-item input-text">
                    证件号码：
                </Col>
                <Col span="4" class="col-item">
                    <Input v-model="userinfo.HolderIdCard" size="large" placeholder=""></Input>
                </Col>
            </Row> 
            <Row>       
                <Col span="2" class="col-item input-text">
                    投保人手机号：
                </Col>
                <Col span="4" class="col-item">
                    <Input v-model="userinfo.HolderMobile" size="large" placeholder=""></Input>
                </Col>                
            </Row>
        </div>
        <div class="quote-box">
            <h3>基本险</h3>
        </div> 
        <div class="quote-info">
            <Row>
                <Col span="4">
                    车辆损失险
                </Col>
                <Col span="10" offset="">
                    <Form  :label-width="80" inline>                    
                        <FormItem label="折旧价">
                            <Input size="large" disabled v-model="SaveQuote.CheSun"  placeholder="请输入"></Input>
                        </FormItem>
                        <FormItem label="/协商价">
                            <Input size="large" placeholder="请输入"></Input>
                        </FormItem>
                    </Form>
                    
                </Col>
                <Col span="2" offset="6">
                    <Checkbox class="quote-info-check input-text" :true-value="checkboxture" :false-value="checkboxfalse" v-model="SaveQuote.BuJiMianCheSun">不计免赔</Checkbox>
                </Col>
                <Col span="2">               
                    <Select size="large" v-model="SaveQuote.CheSunT">
                        <Option v-for="item in Holderornot" :key="item.value" :value="item.value">{{item.label}}</Option>                                            
                    </Select>
                </Col>
            </Row>
            <Row>
                <Col span="4">
                    第三者责任险
                </Col>
                <Col span="2" offset="16">
                    <Checkbox class="quote-info-check input-text"  :true-value="checkboxture" :false-value="checkboxfalse" v-model="SaveQuote.BuJiMianSanZhe">不计免赔</Checkbox>
                </Col>
                <Col span="2">
                
                    <Select size="large" v-model="SaveQuote.SanZhe">
                        <Option v-for="item in sanzhe" :key="item.value" :value="item.value">{{item.label}}</Option>                                             
                    </Select>
                </Col>
            </Row>
            <Row>
                <Col span="4">
                    全车盗抢险
                </Col>
                <Col span="2" offset="16">
                    <Checkbox class="quote-info-check input-text"  :true-value="checkboxture" :false-value="checkboxfalse" v-model="SaveQuote.BuJiMianDaoQiang">不计免赔</Checkbox>
                </Col>
                <Col span="2">                
                    <Select size="large" v-model="SaveQuote.DaoQiangT">
                        <Option v-for="item in Holderornot" :key="item.value" :value="item.value">{{item.label}}</Option>                                            
                    </Select>
                </Col>
            </Row>
            <Row>
                <Col span="4">
                    司机座位责任险
                </Col>
                <Col span="2" offset="16">
                    <Checkbox class="quote-info-check input-text"  :true-value="checkboxture" :false-value="checkboxfalse" v-model="SaveQuote.BuJiMianSiJi">不计免赔</Checkbox>
                </Col>
                <Col span="2">
                
                    <Select size="large" v-model="SaveQuote.SiJi">
                        <Option v-for="item in zeren" :key="item.value" :value="item.value">{{item.label}}</Option>                                            
                    </Select>
                </Col>
            </Row>
            <Row>
                <Col span="4">
                    乘客座位责任险
                </Col>
                <Col span="2" offset="16">
                    <Checkbox class="quote-info-check input-text"  :true-value="checkboxture" :false-value="checkboxfalse" v-model="SaveQuote.BuJiMianChengKe">不计免赔</Checkbox>
                </Col>
                <Col span="2">
                
                    <Select size="large" v-model="SaveQuote.ChengKe">
                         <Option v-for="item in zeren" :key="item.value" :value="item.value">{{item.label}}</Option>                                             
                    </Select>
                </Col>
            </Row>
        </div>
        <div class="quote-box">
            <h3>附加险</h3>
        </div>
        <div class="quote-info">
            <Row>
                <Col span="4">
                    划痕险
                </Col>
                <Col span="2" offset="16">
                    <Checkbox class="quote-info-check input-text"  :true-value="checkboxture" :false-value="checkboxfalse" v-model="SaveQuote.BuJiMianHuaHen">不计免赔</Checkbox>
                </Col>                
                <Col span="2">
                
                    <Select size="large" v-model="SaveQuote.HuaHen">
                        <Option v-for="item in huahen" :key="item.value" :value="item.value">{{item.label}}</Option>                                           
                    </Select>
                </Col>
            </Row>
            <Row>
                <Col span="4">
                    玻璃单独破碎险
                </Col> 
                <Col span="2" offset="16">
                    <Checkbox class="quote-info-check input-text"  :true-value="checkboxture" :false-value="checkboxfalse" disabled>不计免赔</Checkbox>
                </Col>              
                <Col span="2">
                
                    <Select size="large" v-model="SaveQuote.BoLi">
                        <Option v-for="item in boli" :key="item.value" :value="item.value">{{item.label}}</Option>                                            
                    </Select>
                </Col>
            </Row>
            <Row>
                <Col span="4">
                    自燃损失险
                </Col>
                <Col span="2" offset="16">
                    <Checkbox class="quote-info-check input-text"  :true-value="checkboxture" :false-value="checkboxfalse" v-model="SaveQuote.BuJiMianZiRan">不计免赔</Checkbox>
                </Col>
                <Col span="2">
                
                    <Select size="large" v-model="SaveQuote.ZiRan">
                        <Option v-for="item in Holderornot" :key="item.value" :value="item.value">{{item.label}}</Option>                                            
                    </Select>
                </Col>
            </Row>
            <Row>
                <Col span="4">
                    涉水行驶损失险
                </Col>
                <Col span="2" offset="16">
                    <Checkbox class="quote-info-check input-text"  :true-value="checkboxture" :false-value="checkboxfalse" v-model="SaveQuote.BuJiMianSheShui">不计免赔</Checkbox>
                </Col>
                <Col span="2">
                
                    <Select size="large" v-model="SaveQuote.SheShui">
                        <Option v-for="item in Holderornot" :key="item.value" :value="item.value">{{item.label}}</Option>                                           
                    </Select>
                </Col>
            </Row>
            <Row>
                <Col span="4">
                    车损无法找到第三方险
                </Col>
                <Col span="2" offset="16">
                    <Checkbox class="quote-info-check input-text"  :true-value="checkboxture" :false-value="checkboxfalse" disabled>不计免赔</Checkbox>
                </Col>
                <Col span="2">
                
                    <Select size="large"  v-model="SaveQuote.HcSanFangTeYue">
                        <Option v-for="item in Holderornot" :key="item.value" :value="item.value">{{item.label}}</Option>                                            
                    </Select>
                </Col>
            </Row>
            <Row>
                <Col span="4">
                    指定修理厂险
                </Col>
                <Col span="2" offset="16">
                    <Checkbox class="quote-info-check input-text"  :true-value="checkboxture" :false-value="checkboxfalse" disabled>不计免赔</Checkbox>
                </Col>
                <Col span="2">
                
                    <Select size="large" v-model="SaveQuote.HcXiuLiChangType">
                        <Option v-for="item in xiulichang" :key="item.value" :value="item.value">{{item.label}}</Option>                                            
                    </Select>
                </Col>
            </Row>
            <Row>
                <Col span="4">
                    新增设备损失险
                </Col>
                <Col span="2" offset="16">
                    <Checkbox class="quote-info-check input-text" :true-value="checkboxture" :false-value="checkboxfalse" >不计免赔</Checkbox>
                </Col>
                <Col span="2">
                
                    <Select size="large" v-model="SaveQuote.SheBeiSunShi">
                        <Option v-for="item in Holderornot" :key="item.value" :value="item.value">{{item.label}}</Option>                                           
                    </Select>
                </Col>
            </Row>
            <Row>
                <Col span="4">
                    修理期间费用补偿险
                </Col>
                <Col span="2" offset="16">
                    <Checkbox class="quote-info-check input-text"  :true-value="checkboxture" :false-value="checkboxfalse" disabled>不计免赔</Checkbox>
                </Col>
                <Col span="2">
                
                    <Select size="large" v-model="SaveQuote.Fybc">
                        <Option v-for="item in Holderornot" :key="item.value" :value="item.value">{{item.label}}</Option>                                            
                    </Select>
                </Col>
            </Row>
        </div>
        <div class="quote-footer">
            <Row>
                <Col span="6" offset="9" >
                    <Button type="primary" size="large">查看续保信息</Button>
                    <Button type="error" size="large" @click="sendinfo()">提交报价</Button>
                </Col>
            </Row>            
        </div>                 
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { getCarList ,getCarLastInfo,goQuote  } from '../../api/car'
export default {
    data() {
        return {
            checkboxture:1,
            checkboxfalse:0,
            QuoteGrouparry:[

            ],
            SubmitGrouparry:[

            ],
            company:{
                1:{
                    id:"tpy",
                    name:"太平洋",                    
                },
                2:{
                    id:"pa",
                    name:"平安", 
                },
                4:{
                    id:"rb",
                    name:"人保", 
                },
                8:{
                    id:"gsc",
                    name:"国寿财", 
                },
                16:{
                    id:"zhlh",
                    name:"中华联合", 
                },
                32:{
                    id:"tpy",
                    name:"大地", 
                },
                2048:{
                    id:"astp",
                    name:"安盛天平", 
                }
            },
            ComList:[

            ],
            userinfo:{
                
            },
            SaveQuote:{

            },
            Holderornot:[
                {
                    value:1,
                    label:'投保'
                },
                {
                    value:0,
                    label:'不投保'
                }
            ],
            sanzhe:[
                {
                    value:0,
                    label:'不投保'
                },
                {
                    value:50000,
                    label:'5万'
                },
                {
                    value:100000,
                    label:'10万'
                },
                {
                    value:150000,
                    label:'15万'
                },
                {
                    value:200000,
                    label:'20万'
                },
                {
                    value:300000,
                    label:'30万'
                },
                {
                    value:500000,
                    label:'50万'
                },
                {
                    value:1000000,
                    label:'100万'
                },
                {
                    value:1500000,
                    label:'150万'
                },
                {
                    value:2000000,
                    label:'200万'
                },
                {
                    value:2500000,
                    label:'250万'
                },
                {
                    value:3000000,
                    label:'300万'
                },
                {
                    value:5000000,
                    label:'500万'
                },
            ],
            zeren:[
                {
                    value:0,
                    label:'不投保'
                },
                {
                    value:10000,
                    label:'1万'
                },
                {
                    value:20000,
                    label:'2万'
                },
                {
                    value:30000,
                    label:'3万'
                },
                {
                    value:40000,
                    label:'4万'
                },
                {
                    value:50000,
                    label:'5万'
                },
                {
                    value:100000,
                    label:'10万'
                },
                {
                    value:200000,
                    label:'20万'
                },
                {
                    value:500000,
                    label:'50万'
                },
                {
                    value:1000000,
                    label:'100万'
                },
            ],
            huahen:[
                {
                    value:0,
                    label:'不投保'
                },
                {
                    value:2000,
                    label:'2000元'
                },
                {
                    value:5000,
                    label:'5000元'
                },
                {
                    value:10000,
                    label:'1万'
                },
                {
                    value:20000,
                    label:'2万'
                },
            ],
            boli:[
                {
                    value:0,
                    label:'不投保'
                },
                {
                    value:1,
                    label:'国产'
                },
                {
                    value:2,
                    label:'进口'
                },
            ],
            xiulichang:[
                {
                    value:"-1",
                    label:'不投保'
                },
                {
                    value:0,
                    label:'国产'
                },
                {
                    value:1,
                    label:'进口'
                },
            ],
            cardtype:[
                {
                    value:1,
                    label:'身份证'
                },
                {
                    value:2,
                    label:'组织机构代码证'
                },
                {
                    value:3,
                    label:'护照'
                },
                {
                    value:4,
                    label:'军官证'
                },
                {
                    value:5,
                    label:'港澳回乡证或台胞证'
                },
                {
                    value:6,
                    label:'其他'
                },
                {
                    value:7,
                    label:'港澳通行证'
                },
                {
                    value:8,
                    label:'出生证'
                },
                {
                    value:9,
                    label:'营业执照（社会统一信用代码）'
                },
                {
                    value:10,
                    label:'税务登记证'
                }
            ],
        };
    },
    components: {
        productTitle
    },
    computed:{
        QuoteGroup() {
            let _QuoteGroup = 0
            for(var i=0,len = this.QuoteGrouparry.length;i<len;i++){
                _QuoteGroup +=this.QuoteGrouparry[i]
            }
            return _QuoteGroup
        },
        SubmitGroup() {
            let _SubmitGroup = 0
            for(var i=0,len = this.SubmitGrouparry.length;i<len;i++){
                _SubmitGroup +=this.SubmitGrouparry[i]
            }
            return _SubmitGroup
        }
    },
    created() {
        this.getInfo()
    },
    methods: {
        getInfo() {
            var _params = {
                id:this.$route.params.id
            }
            new Promise((resolve, reject) => {
                getCarLastInfo(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        this.ComList = response.data.data.ComList
                        this.userinfo = response.data.data.UserInfo
                        this.SaveQuote = response.data.data.SaveQuote
                        if(response.data.data.SaveQuote.CheSun){
                            this.SaveQuote.CheSunT = 1
                        }else{
                            this.SaveQuote.CheSunT = 0
                        }
                        if(response.data.data.SaveQuote.DaoQiang){
                            this.SaveQuote.DaoQiangT = 1
                        }else{
                            this.SaveQuote.DaoQiangT = 0
                        }
                        if(response.data.data.SaveQuote.SheBeiSunShi){
                            this.SaveQuote.SheBeiSunShi = 1
                        }else{
                            this.SaveQuote.SheBeiSunShi = 0
                        }
                        if(response.data.data.SaveQuote.Fybc){
                            this.SaveQuote.Fybc = 1
                        }else{
                            this.SaveQuote.Fybc = 0
                        }
                        if(response.data.data.UserInfo.NextForceStartDate){
                            this.userinfo.jiaoqiang = 1
                        }else{
                            this.userinfo.jiaoqiang = 0
                        }
                        if(response.data.data.UserInfo.NextBusinessStartDate){
                            this.userinfo.shangye = 1
                        }else{
                            this.userinfo.shangye = 0
                        }
                    } else {
                        
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        sendinfo() {
            var all = {}
            Object.assign(all,this.SaveQuote)
            all.QuoteGrouptxt = this.QuoteGrouparry.join()
            all.SubmitGrouptxt = this.SubmitGrouparry.join()
            all.QuoteGroup = this.QuoteGroup
            all.SubmitGroup = this.SubmitGroup
            all.id = this.$route.params.id
            all.ForceTax = 1
            all.CheSun = all.CheSun > 0? 1: 0
            all.DaoQiang = all.DaoQiang>0?1:0
            all.BizTimeDate = this.userinfo.NextBusinessStartDate
            all.ForceTimeDate = this.userinfo.NextForceStartDate
            all.InsuredName = this.userinfo.InsuredName
            all.InsuredIdCard = this.userinfo.InsuredIdCard
            all.InsuredIdType = this.userinfo.InsuredIdType
            all.InsuredMobile = this.userinfo.InsuredMobile
            all.HoldName = this.userinfo.HoldName
            all.HoldIdCard = this.userinfo.HoldIdCard
            all.HoldIdType = this.userinfo.HoldIdType
            all.HoldMobile = this.userinfo.HoldMobile
            all.IdType = this.userinfo.IdType
            all.LiceseOwner = this.userinfo.LiceseOwner
            all.CredentislasNum = this.userinfo.CredentislasNum
            delete all.Source
            delete all.HcJingShenSunShi
            delete all.CheSunT

            console.log(all)
            new Promise((resolve, reject) => {
                goQuote(all).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                       this.$router.push({ name: 'quote_result',params: { id: this.$route.params.id }});
                    } else {
                        
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        }
    }
};
</script>
